<template>
  <div class="source-wrap">
    <basic-container>
      <div class="title">来源稿件</div>
      <button-group class="btn"></button-group>
      <div class="flex-wrap">
        <DataEchart :opts="opts" class="chart"></DataEchart>
           <div class="source-rank-list"
              v-if="curArchive.length > 0">
              <ul class="source-rank-list-inner" :class="{'is-close2': !rankOpen}">
                <li v-for="(item, index) in curArchive" :key="index"
                  v-show="rankOpen || index < 3"
                  class="source-rank-list-item">
                  <div class="item-taginfo">
                    <div class="item-tag">
                        <div class="mark" :style="{backgroundColor: rankColors[index]}"></div>
                        <div class="rankIndex" :style="{color: rankColors[index]}"><i class="bcc-iconfont " :class="[numIcon[index]]" /></div>
                    </div>
                  
                    <div class="video-info">
                      <h3 class="video-info-title ellipsis">
                        <a :title="item.title" href="#" target="_blank">{{item.title}}</a>
                      </h3>
                      <p class="video-info-pubdate">发布时间：{{item.time}}</p>
                    </div>
                  </div>
                  <dc-button-group class="link-buttons">
                    <dc-button type="text"
                      bccIcon="bcc-icon-icon_list_player_x">
                      <a href="#" target="_blank">去播放页</a>
                    </dc-button>
                    <dc-button type="text"
                      bccIcon="bcc-icon-icon_list_ranking_x">
                       <a href="#">数据分析</a>
                    </dc-button>
                  </dc-button-group>
                </li>
              </ul>
              <div class="source-rank-stretch-button"
                @click="rankOpen = !rankOpen"
                v-if="curArchive.length > 3 && !rankOpen"
                >
                <p>展开更多</p>
              </div>
              <div class="source-rank-stretch-button"
                @click="rankOpen = !rankOpen"
                v-if="curArchive.length > 3 && rankOpen">
                <p>收起列表</p>
              </div>
            </div>
      </div>
    </basic-container>
  </div>
</template>
<script>
import BasicContainer from '../common/basicContainer.vue'
import ButtonGroup from '../components/buttonGroup'
import DataEchart from '../components/dataEchart'
import {rankColors} from '../components/constants.js'
import DcButton from '../components/button/index'
import DcButtonGroup from '../components/buttonGroup/index'
export default {
  components: {
    BasicContainer,
    ButtonGroup, 
    DataEchart,
    DcButton,
    DcButtonGroup
  },
  data () {
    return {
      rankColors,
      numIcon: ['bcc-icon-x', 'bcc-icon-x7', 'bcc-icon-x9', 'bcc-icon-x3', 'bcc-icon-x4', 'bcc-icon-x6', 'bcc-icon-x2', 'bcc-icon-x5', 'bcc-icon-x8', 'bcc-icon-x1'],
      curArchive: [],
      rankOpen: false
    }
  },
  mounted () {
    for (let i = 0; i < 10; i++) {
      this.curArchive.push({
        title: '1232421',
        time: '2017-05-02'
      })
    }
  },
  computed: {
    opts () {
      let archive = []
      for (let i = 0; i < 10; i++) {
        archive.push({
          incr: i,
          title: i
        })
      }

      return {
        legend: {
          data: archive.map(({ title }) => title),
        },
        series: [{
          type: 'pie',
          center: ['50%', '45%'],
          radius: ['40%', '80%'],
          left: 0,
          top: 0,
          startAngle: 90,
          name: '来源稿件',
          data: archive.map(({ incr, title }) => {
            return { name: title, value: incr }
          })
        }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .source-wrap{
    .title{
      font-weight: bolder;
      font-size: 16px;
      color: #212121;
      line-height: 20px;
    }
    .btn{
      margin-top: 20px;
    }
    .chart{
      margin-top: 32px;
      height: 280px;
      width: 282px;
    }
    .flex-wrap{
      display: flex;
      .source-rank-list {
          margin-left: 43px;
          margin-top: 32px;
          width: 100%;
          &-item {
            position: relative;
            height: 64px;
            box-sizing: border-box !important;
            margin-top: 0;
            &:not(:first-child) {
              margin-top: 8px;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0;
            white-space: nowrap;
            border: 1px #e7e7e7 solid;
            border-radius: 2px;
            .item-taginfo {
              display: flex;
              width: 0;
              flex: 1;
              .mark {
                position: absolute;
                top:0px;
                bottom: 0px;
                height: 63px;
                border-radius: 2px 0 0 2px;
                width: 8px;
              }
              .rankIndex {
                display: flex;
                width: 64px;
                font-size: 22px;
                color: #C0C0C0;
                text-align: center;
                padding: 0;
                font-style: normal;
                height: 100%;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
              }
              .video-info {
                display: inline-block;
                padding: 12px 0;
                box-sizing: border-box;
                vertical-align: middle;
                overflow: hidden;
                &-title {
                  width: 100%;
                  line-height: 20px;
                  font-weight: normal;
                  font-size: 14px;
                  color: #212121;

                  font-weight: bolder;
                  a {
                    color: #2b2c2e;
                    &:hover{
                      color: #00A1D6
                    }
                  }
                }
                &-pubdate {
                  line-height: 18px;
                  margin-top: 2px;
                  font-size: 12px;
                  color: #7a7c7f;
                }
              }
            }
            .link-buttons {
              display: inline-block;
              // padding: 0 25px;
              vertical-align: middle;
              .dc-button {
                margin-right: 10px;
                padding: 0;
                font-size: 14px;
                color: #505050;
                &_icon {
                  font-size: 16px;
                }
                &:last-child {
                  margin-right: 40px;
                  margin-left: 32px;
                }
              }
            }
          }
        }
    }
    .source-rank-stretch-button {
      height: 42px;
      line-height: 42px;
      margin-top: 12px;
      text-align: center;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
      background: #F4F4F4;
      border: 1px solid #E7E7E7;
      border-radius: 2px;
    }    
  }
</style>


